<template>
<div>
    <iframe :src='ifram_url' id='myframe' />
    <div class="haha">
        <ul>
            <li v-for="(item, index) in data" :key="index">
                <span>{{item.id}}</span>
                <a-button @click="() => handleClick(item)">预览</a-button>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'preview',
    data() {
        return {
            // ifram url
            ifram_url: 'http://newtestme.liticool.xyz/xujinshan.photo_operators/main',
            data: []

        }
    },
    methods: {
        handleClick(data) {
            console.log(data)
            const iFrame = document.getElementById('myframe')

            // axios.get("http://192.168.0.118:23333/api/fetchOneTemplate", {
            //         headers: {
            //             'Accept': 'application/json;application/json',
            //             'Content-Type': 'application/json;charset=UTF-8;'
            //         }
            //     })
            //     .then(res => {
            //         console.log(res.data)

            //     })
            const {
                material
            } = data
            iFrame.contentWindow.postMessage({
                currentTheme: {
                    ...material
                }
            }, '*');

        }
    },
    mounted() {
        //获取iframe元素
        const iFrame = document.getElementById('myframe')
        console.log(iFrame)

        //iframe加载完毕后再发送消息，否则子页面接收不到message
        iFrame.onload = function () {

        }
        const _this = this;
        // const _this = this;
        axios.get("http://192.168.0.118:23333/api/fetchTemplate", {
                headers: {
                    'Accept': 'application/json;application/json',
                    'Content-Type': 'application/json;charset=UTF-8;'
                }
            })
            .then(res => {
                console.log(res.data)
                _this.data = [...res.data]
            })
    }
}
</script>

<style lang="less" scoped>
#myframe {
    position: relative;
    top: 0;
    left: 0;
    width: 720px;
    height: 100vh;
}

.haha {
    box-sizing: border-box;
    position: relative;
    padding: 50px 0;
    width: 100%;

    ul {
        position: relative;
        width: 100%;
        font-size: 20px;

        li {
            width: 100%;
            position: relative;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
        }
    }
}
</style>
